<template>
   <div class="container-y">
      <div class="title"><img src="../assets/number-two.png" alt=""></div>
      <div class="title-text">选择您的学习目的</div>
      <div class="tab-box">
          <div class="tab-item"
          :class="{'active': index === choosetabs}" 
           @click="gochange(index)"
           :key="index"
           v-for="(choosetab,index) in choosetablist">
           {{choosetab.type}}
           </div>
      </div>
      <div class="next-go"> <router-link :to='{path:"/ChooseTime"}'>下一步</router-link></div>
   </div>
</template>
<script>
export default {
   data () {
	return {
       choosetablist:[
          {type:"总榜"},
           {type:"总榜"},
          {type:"周榜"},
          {type:"月榜"},
        ],
       choosetabs:0,
     }
  },
  methods:{
     gochange(index){
         this.choosetabs=index
      }
  }
}
</script>

<style scoped>
.container-y{
    height:100%;
    width:100%;
}
.title{
      padding:60px 0;
      display: flex;
      justify-content: center;
  }
  .title img{
      height:32px;
      width:296px;
  }
  .title-text{
      font-size: 32px;
      color: #ff3434;
      text-align: center;
  }
  .tab-box{
      padding-top: 180px;
      display: flex;
      color: #ff3434;
      margin: 0 20px;
      justify-content: space-between;
  }
  .tab-box .active{
    background: #ff3434;
    color: #fff;
    box-shadow: 0px 0px 1px 1px #f97878;
    border: 0;
  }
  .tab-item{
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      box-sizing: border-box;
      width:170px;
      background: #f6f6f6;
      height: 204px;
  }
  .next-go{
    line-height: 75px;
    height: 75px;
    background: #ff3434;
    text-align: center;
    font-size: 32px;
    margin: 380px 20px 0 20px;
    color: #fff;
    border-radius: 4px;
}
.next-go a{
   color: #fff;  
   display: block;
}
</style>

